<template>
	 <view>
		 <view class="pointtop">
		 		<view style="font-size: 36rpx;">消息</view>
		 		<image src="/static/image/Index/index-search.png" mode="" @click="switchSearch" class="search_icon">	</image>
		 </view>
			<view class="msg-top">
					<view class="msgtop-list">
							<view class="msglist_item" @click="handleSystem">
									<image src="/static/image/message/message-msg.png" class="sysimg" mode=""></image>
									<view class="icon-red"></view>
									<view class="smg-info">
										<view class="smginfotitle">系统消息</view>
										<view class="smgcontent">最近有新版本更新了~</view>
									</view>
							</view>
							<view class="msglist_item" @click="handleInter">
									<image src="/static/image/message/message-hudong.png" class="sysimg" mode=""></image>
									<view class="smg-info">
										<view class="smginfotitle">互动消息</view>
										<view class="smgcontent">有人给你点赞了~</view>
									</view>						
							</view>			
					</view>
			</view>	
			<view class="list" v-if="conversationList.length>0">
				<view v-for="item,index of conversationList" :key="item.conversationID"  v-if="item.type!='@TIM#SYSTEM'">
					<view class="list_detail flex align-center justify-between"  @click="navTo(`/pages/TUIKit/TUI-Chat/chat?conversationID=${item.conversationID}`)" >
												 	
						<image  
						 :fade="false" 
						 :src="item.userProfile.avatar||''" 
						 width="40px" height="40px" 
						 mode="aspectFill" shape="circle" 
						 :loadingIcon="$store.state.loadingIcon"
						 v-if="item.conversationID.indexOf('C2C')!=-1"></image>
						<view class="groupavater" v-if="item.conversationID.indexOf('GROUP')!=-1">
							<image  :src="item.groupProfile.avatar" mode="widthFix" width="40px" height="40px"   :fade="false"></image>
						</view>
						<view class="right text-l">
							<view class="flex align-center justify-between">
								<view v-if="item.conversationID.indexOf('C2C')!=-1">{{item.userProfile.nick||'暂无名称'}}</view>
								<view v-if="item.groupProfile">{{item.groupProfile.name||''}}</view>
								<view class="text-sm text-bbb" style="margin-right: 10rpx;" v-if='item.lastMessage.lastTime!=0'>{{isToday(timestampToDate(item.lastMessage.lastTime))}}</view>
							</view>
							<view class="flex  justify-between particulars">
								<view class="text-999 text-sm text">{{item.lastMessage.messageForShow}}</view>
								<view class="box" v-if="item.unreadCount!=0">
									 <!-- <u-badge  max="99" :value="item.unreadCount" bgColor="#FF9D3D"></u-badge> -->
								</view>
							</view>
							
						</view>
					 </view>
				</view>
			</view>
			<!-- 客服 -->
		<image src="/static/image/Index/point-kefu.png" mode="" @click="handleMore" class="kefu"></image>
		
		<!-- 底部客服-->
				<uni-popup class="select_popup" ref="popupMore" :mask-click="true" type="bottom">
					<view class="morePopup">
						 <view class="selectBlack">139999999</view>		
						 <view class="selectDel">拨打电话</view>	
						 <view class="selectclose" @click="closeMore">取消</view>	
					</view>
				</uni-popup>
		
	 </view>
</template>

<script>
	import tim from '@/common/utils/tim';
	import {timestampToDate,isToday} from '@/common/TUIKit/time.js'
	export default {
		data() {
			return {
				conversationList:[],
				isToday:isToday,
				timestampToDate:timestampToDate,
			}
		},
		onShow() {
			this.getConversationList()
		},
		methods: {
			getConversationList() {
				tim.getConversationList({
					// type: 'TencentCloudChat.TYPES.GRP_MEETING'
				}).then(imResponse => {
					console.log('------',imResponse.data)
					this.conversationList = imResponse.data.conversationList;
					console.log(this.conversationList)
					// this.conversationList.forEach((val,index)=>{
					// 	if(val.conversationID.indexOf('GROUP')!=-1){
					// 		this.getImgList(val.conversationID).then((res)=>{
					// 			console.log(res)
					// 			this.$nextTick(()=>{
					// 				this.$set(this.conversationList[index],'imageList',res);
					// 				// this.conversationList[index].imageList = res;
					// 			});
					// 		})
					// 	}
					// })
					// this.loading=false
					// let onConversationListUpdated = function(event) {
					//   console.log(event.data); // 包含 Conversation 实例的数组
					// };
					// uni.$TUIKit.on(TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED, onConversationListUpdated);
				}).catch(function(imError) {
					  // 获取会话列表失败的相关信息
					  // console.warn('getConversationList error:', imError);
				});
			
			},
			async getImgList(id){
				var groupId = id.substr(5)
				 var res = await tim.getGroupMemberList({ groupID: groupId, count: 15, offset: 0 });
				if(res.code == 0){
					return res.data.memberList;
				}
				// console.log(this.conversationList)
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
			handleMore(){
				this.$refs.popupMore.open()
			},
			closeMore(){
				this.$refs.popupMore.close()
			},
			handleSystem(){
				this.$helper.to('/pages/tabBar/message/systemMsg')
			},
			switchSearch(){
				this.$helper.to('/pages/tabBar/message/messageSearch')
			},
			handleInter(){
				this.$helper.to('/pages/tabBar/message/messageInter')
			},
		}
	}
</script>

<style  scoped lang="scss">
	page{
		background-color: #F8F8F8;
	}	
	.pointtop{
		background: #fff;
		position: relative;
		display: flex;
		align-items: center;
		padding: 30rpx;
		justify-content: center;
	}
	.search_icon {
		position: absolute;
		width: 31rpx;
		height: 34rpx;
		right:30rpx;
		top:40rpx;
	}

	.select_popup {
		z-index: 9999;
		width: 100%;
		.morePopup {
			background-color: #fff;
			height: 398rpx;
			border-radius:30rpx 30rpx 0 0 ;
		 .selectBlack{
				margin:0 30rpx;
				font-size: 30rpx;
				border-bottom:1px solid #f8f8f8;
				height:118rpx;
				text-align: center;
				line-height: 118rpx;
				color:#000;
			}
			.selectDel{
				font-size: 30rpx;
				height:118rpx;
				text-align: center;
				line-height: 118rpx;
				font-weight: bold;
				color:#000;
			}
			.selectclose{
				font-size: 30rpx;
				border-top:16px solid #f8f8f8;
				height:118rpx;
				text-align: center;
				line-height: 118rpx;
				color:#999;
			}
		}
		}
	.msg-top{
		background: #fff;
		.msgtop-list{
			margin:0 30rpx;
		}
		.msglist_item{
			position: relative;
			display: flex;
			align-items: center;
			height:158rpx;
			border-bottom: 1px solid #eee;
		}
	
		.sysimg{
			width:98rpx;
			height:98rpx;

		}
		.icon-red{
			width:20rpx;
			height:20rpx;
			position: absolute;
			background:red;
			top:22rpx;
			left:84rpx;
			border-radius: 50%;
		}
		.smg-info{
			margin-left:16rpx;
		}
		.smginfotitle{
			font-size: 30rpx;
			font-weight: 500;
		}
		.smgcontent{
			font-size: 24rpx;
			color:#999;
			margin-top:12rpx;
			width:536rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	
	}
	.list{
		margin: 20rpx 0;
		background: #fff;
		// border-radius: 16rpx;
		// box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
		padding:2rpx 30rpx 20rpx;
		// transition: all rpxs ease;
		
		// &:active {
		// 	transform: scale(0.98);
		// 	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		// }
		
		.list_detail{
			margin-top: 30rpx;
			.right{
				width: calc(100% - 100rpx);
				margin-left: 20rpx;
				
				.particulars{
					margin-top: 12rpx;
					align-items: center;
					
					.text{
						width: 70%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						color: #666;
						font-size: 26rpx;
						line-height: 1.4;
					}
					
					.box {
						background: linear-gradient(135deg, #FF9D3D, #FF6B6B);
						color: #fff;
						border-radius: 40rpx;
						// padding: 6rpx 16rpx;
						font-size: 22rpx;
						width: 10rpx;
						height: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: 500;
					}
				}
				
				.flex.align-center.justify-between {
					align-items: flex-start;
					
					view:first-child {
						font-size: 32rpx;
						font-weight: 600;
						color: #333;
						max-width: 70%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					
					.text-sm.text-bbb {
						font-size: 24rpx;
						color: #999;
						margin-right: 0;
					}
				}
			}
			
			.groupavater{
				// border: 3rpx solid #FF9D3D;
				border-radius: 16rpx;
				overflow: hidden;
				width: 88rpx;
				height: 88rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: wrap;
				box-sizing: border-box;
				// background: linear-gradient(135deg, #FFF9F0, #FFEEDD);
				
				image{
					width: 80rpx;
					height: 80rpx;
					border-radius: 8rpx;
				}
			}
			
			image:not(.groupavater image) {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				border: 3rpx solid #FF9D3D;
				box-shadow: 0 4rpx 12rpx rgba(255, 157, 61, 0.2);
			}
		}
	}

	.kefu{
		width:80rpx;
		height:80rpx;
		position: fixed;
		bottom:126rpx;
		right:30rpx;
	}
	
</style>
